<template>
  <div v-bind:class="[
      'stars',
      'stars-' + size
    ]">
    <span v-for="itemClass in itemClasses" v-bind:class="itemClass"></span>
  </div>
</template>

<script>
const MAX_COUNT = 5
const CLS_ON = 'star star-on'
const CLS_OFF = 'star star-off'
const CLS_HALF = 'star star-half'

export default {
  name: 'stars',

  props: {
    score: {
      type: Number,
      default: 0
    },

    size: {
      type: Number,
      default: 36     // 24 36 48
    }
  },

  computed: {
    starType() {
      return 'start-' + this.size
    },

    itemClasses() {
      let result = []
      let score = Math.floor(this.score * 2) / 2
      let hasDecimal = score % 1 !== 0
      let integer = Math.floor(score)

      for (let i = 0; i < integer; i++) {
        result.push(CLS_ON)
      }

      if (hasDecimal) {
        result.push(CLS_HALF)
      }

      while (result.length < MAX_COUNT) {
        result.push(CLS_OFF)
      }

      return result
    }
  }
}
</script>

<style lang="less" scoped>
.stars {
  .star {
    display: inline-block;
    margin-right: 5px;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .star:last-child {
    margin-right: 0;
  }
}

.stars-24 {
  .star {
    width: 12px;
    height: 12px;
  }

  .star-on {
    background-image: data-uri('../assets/star24_on@2x.png');
  }

  .star-half {
    background-image: data-uri('../assets/star24_half@2x.png');
  }

  .star-off {
    background-image: data-uri('../assets/star24_off@2x.png');
  }
}

.stars-36 {
  .star {
    width: 18px;
    height: 18px;
  }

  .star-on {
    background-image: data-uri('../assets/star36_on@2x.png');
  }

  .star-half {
    background-image: data-uri('../assets/star36_half@2x.png');
  }

  .star-off {
    background-image: data-uri('../assets/star36_off@2x.png');
  }
}

.stars-48 {
  .star {
    width: 24px;
    height: 24px;
  }

  .star-on {
    background-image: data-uri('../assets/star48_on@2x.png');
  }

  .star-half {
    background-image: data-uri('../assets/star48_half@2x.png');
  }

  .star-off {
    background-image: data-uri('../assets/star48_off@2x.png');
  }
}

</style>
